<template>
  <div ref="fullRef" style="position: relative;width:100%;height:calc(100vh - 160px)">
    <div class="play-header" v-if="url">
      <Refresh style="width: 1em; height: 1em; margin-right: 8px;cursor: pointer;" @click="refreshVideo(item)"></Refresh>
      <svg-icon style="cursor:pointer;" @click="toggle" :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"/>
    </div>
    <LivePlayer aspect='fullscreen' :stretch="true" :controls="false"  :videoUrl="url" :hasvideo="true" ></LivePlayer>
  </div>
</template>

<script setup>
import {useRoute} from "vue-router"
import {ref} from "vue"
// import LivePlayer from '@liveqing/liveplayer-v3'
import LivePlayer from '@/components/VideoPlayer/flv.vue'
import {getHistoryLiveInfo, getLiveInfo} from "@/api/wvp/surveillance";
import {parseTime} from '@/utils/ruoyi'
import SvgIcon from "@/components/SvgIcon/index.vue";
import {Refresh} from "@element-plus/icons-vue";
const route = useRoute();

import {useFullscreen} from "@vueuse/core";
const fullRef =ref()
const {isFullscreen, enter, exit, toggle} = useFullscreen(fullRef);

defineComponent(LivePlayer)
const url = ref()
onMounted(()=>{
  refreshVideo()
})
function refreshVideo(){
  const now=new Date();
  now.setTime(now.getTime() - 24*60*60*1000);
  const startTime=parseTime(now.getTime());
  const stopTime=parseTime(new Date().getTime());

  getHistoryLiveInfo(route.query.id,{startTime,stopTime}).then(res => {
    if (res.data) {
      url.value = res.data.url;
    }
  })
}
</script>

<style scoped>
.play-header{
  position: absolute;
  top: 0;
  height: 20px;
  width: 100%;
  z-index: 9999999;
  display: flex;
  background: #f2f2f2;
  opacity: 0.6;
  justify-content: right;
  align-items: center;
}
</style>
